<template>
	<view class="content bg-img bg-mask ">
		<u-navbar :title="i18n.cbjulu1.i1" background="rgba(0,0,0,0)" back-icon-color="#fff" title-color="#fff"></u-navbar>

		<!-- <view class="" :style="[{ height: 70 + 'rpx' }]"></view> -->
		<view class="scroll">
			<view class="flex head  f30 margin-bottom">
				<text class="f-1 flex justify-center" @click="flg(1)" :class="[{ action: show }, { color: show }]">{{i18n.cbjulu1.i2}}</text>
				<text class="f-1 flex justify-center" @click="flg(2)" :class="[{ action: show1 }, { color: show1 }]">{{i18n.cbjulu1.i3}}</text>
			</view>
			<block v-if="show">
				<!-- -->
				<view
					class="r   "
					style="width: 702rpx;height: 260rpx; background:rgba(14, 16, 16, 0.44) ; margin:  0 auto;margin-top: 30rpx;"
					v-for="(item, index) in data"
					:key="index"
				>
					<view
						class=" flex align-center justify-center padding-sm"
						style="height: 76rpx; font-size: 20rpx;font-family: PingFang SC;font-weight: 500;color: #F0F0F0;
						border-bottom: 2rpx solid #242424;"
					>
						<text class="text-cut">{{i18n.cbjulu1.i4}}：{{ item.from_address }}</text>
					</view>
					<view class="wh100 flex">
						<view class=" flex justify-center align-center   flex-direction" style="height: 182rpx; width: 100%;">
							<text style="color: #CCCCCC; font-size: 24rpx;">{{i18n.cbjulu1.i5}}{{ item.left_title }}</text>
							<text style="color: #F0F0F0;font-size: 28rpx;" class="margin-tb-xs">{{ addd(item.left_value) }}</text>
							<text style="color: #CCCCCC; font-size: 22rpx;">{{ item.createtime | dateFormat }}</text>
						</view>
						<view class=" flex justify-center align-center  flex-direction" style="height: 182rpx; width: 100%;">
							<text style="color: #CCCCCC; font-size: 24rpx;">{{i18n.cbjulu1.i6}}{{ item.right_title }}</text>
							<text style="color: #F0F0F0;font-size: 28rpx;" class="margin-tb-xs">{{addd( item.right_value) }}</text>
							<text style="color: #CCCCCC; font-size: 22rpx;">{{ item.createtime | dateFormat }}</text>
						</view>
					</view>
				</view>
			</block>

			<block v-if="show1">
				<!-- -->
				<view
					class="r   "
					style="width: 702rpx;height: 260rpx; background:rgba(14, 16, 16, 0.44) ; margin:  0 auto;margin-top: 30rpx;"
					v-for="(item, index) in data"
					:key="index"
				>
					<view
						class=" flex align-center justify-center padding-sm"
						style="height: 76rpx; font-size: 20rpx;font-family: PingFang SC;font-weight: 500;color: #F0F0F0;
						border-bottom: 2rpx solid #242424;"
					>
						<text class="text-cut">{{i18n.cbjulu1.i4}}：{{ item.address }}</text>
					</view>
					<view class="wh100 flex">
						<view class=" flex justify-center align-center   flex-direction" style="height: 182rpx; width: 100%;">
							<text style="color: #CCCCCC; font-size: 24rpx;">{{i18n.cbjulu1.i5}}{{ item.left_title }}</text>

							<text style="color: #F0F0F0;font-size: 28rpx;" class="margin-tb-xs">{{  addd(item.left_value) }}</text>
							<text style="color: #CCCCCC; font-size: 22rpx;">{{ item.createtime | dateFormat }}</text>
						</view>
						<view class=" flex justify-center align-center  flex-direction" style="height: 182rpx; width: 100%;">
							<text style="color: #CCCCCC; font-size: 24rpx;">{{i18n.cbjulu1.i6}}{{ item.right_title }}</text>
							<text style="color: #F0F0F0;font-size: 28rpx;" class="margin-tb-xs">{{ addd( item.right_value)  }}</text>
							<text style="color: #CCCCCC; font-size: 22rpx;">{{ item.createtime | dateFormat }}</text>
						</view>
					</view>
				</view>
			</block>
		</view>

		<w-loading :text="i18n.pec.i18" mask="true" click="true" ref="loading"></w-loading>
	</view>
</template>

<script>
import myAbnorPage from '../../components/my-abnor-page/my-abnor-page.vue';
export default {
	data() {
		return {
			CustomBar: this.CustomBar,
			page: 1,
			rows: 10,
			data: [],
			total: false,
			show: true,
			show1: false,
		};
	},
	 computed: {
	  i18n() {
	   return this.$t('message');
	  }
	 },
	onLoad() {
		var obj = setInterval(() => {
			if (window.tronWeb) {
				clearInterval(obj);
				this.exchangeComputingPower();
				this.show = true;
			} else {
				this.show = false;
			}
		}, 20);
	},
	methods: {
		addd(e){
			 return  Number(e).toFixed()
			// return  e.toFixed()
		},
		addrr(e) {
			console.log('e :>> ', e);
			if (e) {
				return e.substring(0, 4) + '****' + e.substring(e.length - 4);
			}
		},
		async exchangeComputingPower(type = 1) {
			this.$refs.loading.open();
			let obj = {
				page: this.page,
				rows: this.rows,
				type,
			};
			const res = await this.$u.post('/index.php/api/pec/abilityLog', obj, {
				token: uni.getStorageSync('token'),
			});

			setTimeout(() => {
				this.$refs.loading.close();

				if (res.data.total) {
					this.data = res.data.log;
				} else {
					this.total = true;
				}
			}, 500);
		},
		flg(e) {
			console.log('e :>> ', e);
			if (e == 1) {
				console.log('1111 :>> ', 1111);
				this.exchangeComputingPower(1);
				this.show = true;
				this.show1 = false;
			}
			if (e == 2) {
				console.log('222 :>> ', 222);
				this.exchangeComputingPower(2);
				this.show = false;
				this.show1 = true;
			}
		},
	},
	filters: {
		dateFormat(originVal) {
			var originVal = Number(originVal) * 1000;
			const dt = new Date(originVal);

			const y = dt.getFullYear();
			const m = (dt.getMonth() + 1 + '').padStart(2, '0');
			// this.m = m;
			const d = (dt.getDate() + '').padStart(2, '0');
			const hh = (dt.getHours() + '').padStart(2, '0');
			const mm = (dt.getMinutes() + '').padStart(2, '0');
			const ss = (dt.getSeconds() + '').padStart(2, '0');
			// ${hh}:${mm}:${ss}
			return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	background-image: url(../../static/gern.png);
	.scroll {
		height: calc(100vh - 80rpx);
		overflow: scroll;
		.head {
			position: relative;

			color: #f0f0f0;
			width: 702rpx;
			height: 78rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;

			.info {
			}

			.color {
				color: #04bd9e;
			}
			.action::after {
				content: '';
				position: absolute;
				border-radius: 10%;

				bottom: 0;
				width: 80rpx;
				height: 4rpx;
				background: #04bd9e;
			}
		}
	}
	.head {
		//margin-top: 90rpx;
		color: #f0f0f0;
		width: 702rpx;
		margin: 0 auto;
		//margin-bottom: 50rpx;
	}
	.list {
		width: 702rpx;
		background: rgba(14, 16, 16, 0.44);
		color: #b3b3b3;
		margin: 0 auto;
		//margin-bottom: 20rpx;
	}
}
</style>
